您现在的位置是:长沙网站建设 > 网站建设
式网站建设开发"
长沙网站建设2024-09-21 16:36:36【网站建设】2人已围观
简介随着互联网技术的高速发展,HTML5+CSS3已成为目前比较主流的Web前端开发技术,其与以往的HTML+CSS相比,HTML5的新元素、语义化标签以及属性,再加上CSS3的丰富的渲染效果,能够使开发
随着互联网技术的式网设开高速发展,HTML5+CSS3已成为目前比较主流的站建Web前端开发技术,其与以往的式网设开HTML+CSS相比,HTML5的站建新元素、语义化标签以及属性,式网设开再加上CSS3的站建丰富的渲染效果,能够使开发者极为方便、式网设开快速、站建灵活地实现web页面的式网设开前端开发,响应式网站建设有几个地方需要注意:
开发响应式网站有几个地方需要注意
第一点:在网页代码的站建头部,加入一行viewport元标签.
<meta name="viewport" content="width=device-width,式网设开 initial-scale=1" />
viewport是网页默认的宽度和高度,上面这行代码的站建意思是:网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,式网设开即网页初始大小占屏幕面积的站建100%。
第二点:(注意)不使用绝对宽度,式网设开字体大小
width:auto; / width:XX%;第三点:(注意)字体大小字体大小是页面默认大小的100%,即16像素字体不要使用绝对大小"PX",要使用相对大小“REM”html{ font-size:62.5%;}body { font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }
下面我们介绍一下html5和css3。
一、 HTML5
HTML5是下一代的HTML。HTML5是开放的Web网络平台的奠基石,HTML5的设计目的是为了在移动设备上支持多媒体,其新的语法特征被引进以支持这一点,比如canvas、video和audio标签。HTML5还引进了最新的功能,能够改变用户与文档的交互方式。HTML5的优点包括:
具有强大的可移植性;
提高了用户体验和可用性;
HTML5将被大量的应用在游戏和移动应用程序;
对SEO比较友好;
增加的新标签有助于定义重要内容;
能很好的替代FLASH和Silverlight;
能给站点带来更多的音频和视频等多媒体元素。
二、 CSS3
CSS3是CSS(层叠样式表)技术的升级版本,CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。CSS3的新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@FontFace实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。
三、 页面适应性问题
移动终端与电脑端比较,分辨率和屏幕尺寸都不相同,如果在移动端还是把最大屏幕尺寸设计成和电脑端最大屏幕尺寸一样的比如1024像素,字体大小还设计成电脑端的12像素或者14像素,那么就会出错,因此,在设计移动终端网页时,最好让网页的宽度自适应于屏幕,万维网联盟在设计html的时候充分考虑到了这点,我们只需要加上标签就可以。
四、 图片适应性问题
图片分为背景图片和通过标签引入的图片,前者可以通过media query自动的切换不同分辨率的版本,但是在不支持background image size的浏览器中背景图片无法无级地调整大小(也就是在media query切换css的点上可以换一张不同分辨率的图,但是没法获得两张分辨率中间大小的版本),而且在很多情况下(比如cms中)并不适合用背景图片。
通过标签引入的图片,我们要使用延迟加载图片的方法来加载图片,也就是说在实际加载图片之前,首先要用js检查当前屏幕的宽度,然后页面加载不同分辨率的图片,如屏幕宽度小于等于480,那么就加载80像素宽度的图片,如屏幕宽度大于480小于等于768,那么就加载120像素的图片,如果屏幕宽度大于768则加载160像素的图片,如果屏幕宽度是600像素,那么就需要通过百分比来缩放120像素的图片来达到合适的效果。这种处理方式对于移动设备来说加载的图片变小了,网页浏览速度也减小了,但是在竖屏和横屏的转换,或者浏览器扩大时图片会由于放大而产生模糊问题,这个问题如果解决呢?我们认为对于图片的考虑应该从网页布局设计的开始就应避免图片在各窗口宽度下的尺寸相差不要太大,要排列更多的内容,而不能通过扩大图片尺寸来填充由于浏览器窗口的扩大而带来的空间。
例如:移动设备图片自适应的css代码:
img{ maxwidth:100%;height:auto;width:auto;}五、 导航适应性问题
导航如何能够适应屏幕的大小,怎样适应能够更简单是我们研究的一个难点,通过多种方法的对比,我们发现采用jQuery自适应窗口大小设置导航菜单的方式比较简单。
例如:
.nav{ lineheight:50px;background:#0099cc;position:relative;}.navli{ float:left;}.navlia{ display:block;padding:020px;color:#00C;}.navspan.navon{ display:none;width:20px;position:absolute;top:12px;right:12px;cursor:pointer;}@mediascreenand(maxwidth:768px){ .navul{ display:none;width:100%;}很赞哦!(46)
上一篇: 广州网站建设:如何打造吸引人的在线品牌
相关文章
站长推荐
友情链接
- 如何撰写符合用户搜索习惯的标题?
- 一条好计划想继续扩量该怎么做?10个信息流投放问题
- 超全!SEM/信息流投放必备的9类工具,你用过几个?
- 行业定投如何进行URL追踪?为什么要统计关键词转化情况?商务通主要分析哪些数据?
- 获客越来越难,来看影响SEM投放效果的4个因素!
- 2018Q3教育行业投放报告,哪些信息流创意更受欢迎?
- 外贸独立站,如何用谷歌关键词搜索广告获取优质询盘?
- 【高薪招聘】杭州25k招运营主管;上海14k招信息流SEM优化师
- 话题:文案“1000L油卡”VS“送一吨油卡”,哪个更刺激?
- SEM常用的4种数据分析方法,你还不会吗?
- 30岁以后,还能做竞价优化师吗?
- 专访 | 着陆页不好,账户策划得再好也等于0!
- SEO算法:巴郎深谈石榴算法与算法对策
- 圆源:如何新建单元?
- 谷歌SEO入门教程三:外贸独立网站站内SEO优化关键词(下)
- SEM竞价问题:如何挖掘长尾关键词?长尾词创意该如何撰写?
- 百度中文分词技术是什么?
- 同样是广告投放渠道,为什么转化效果差距这么大?
- 操盘9个项目后,对SEM数据分析的新思考
- 百度信息流与今日头条DSP有啥区别?值不值得做?你问我答024期